ß
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '比赛详情',
  },
}
</route>
<template>
  <view class="bg-gray-1 flex flex-col h-full" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="tournament-detail text-center bg-white">
      <image class="w-full h-45" :src="tournamentInfo.adImage"></image>
      <view class="text-5 my-2">
        {{ tournamentInfo.name }}
      </view>
      <view class="text-4 text-center text-gray-6">
        <text class="text-3 my-1">比赛时间</text>
        <view class="my-1 flex flex-justify-around text-4">
          <view class="flex flex-col">
            <text>{{ formatDateTime(tournamentInfo.fromDate) }}</text>
            <text class="text-blue-600 mt-1">
              {{ formatWeekDay(tournamentInfo.fromDate) }}
            </text>
          </view>
          <text>-</text>
          <view class="flex flex-col">
            <text>{{ formatDateTime(tournamentInfo.endDate) }}</text>
            <text class="text-blue-600 mt-1">
              {{ formatWeekDay(tournamentInfo.endDate) }}
            </text>
          </view>
        </view>
      </view>
      <view class="text-4 text-gray-6 flex flex-col">
        <text class="text-3 my-1">报名截止时间还剩</text>
        <wd-count-down :time="countdownTime">
          <template #default="{ current }">
            <text class="tournament-count-down">{{ current.days }}</text>
            <text class="tournament-count-down-colon">天</text>
            <text class="tournament-count-down">{{ current.hours }}</text>
            <text class="tournament-count-down-colon">时</text>
            <text class="tournament-count-down">{{ current.minutes }}</text>
            <text class="tournament-count-down-colon">分</text>
            <text class="tournament-count-down">{{ current.seconds }}</text>
            <text class="tournament-count-down-colon">秒</text>
          </template>
        </wd-count-down>
      </view>
      <wd-cell-group border>
        <wd-cell title="报名时间" size="large" title-width="25%">
          <view class="tournament-detail-item__value">
            {{
              `${formatDateTime(tournamentInfo.registrationFromDate)}-${formatDateTime(tournamentInfo.registrationFromDate)}`
            }}
          </view>
        </wd-cell>
        <wd-cell title="比赛地址" size="large" title-width="25%">
          <view class="tournament-detail-item__value">
            {{ tournamentInfo.address }}
          </view>
        </wd-cell>
        <wd-cell
          v-for="user in tournamentInfo.concatUserList"
          :key="user.id"
          icon="service"
          :title="user.name"
          size="large"
          title-width="25%"
        >
          <view class="tournament-detail-item__value">
            <text>{{ user.phone }}</text>
            <wd-icon name="call" size="20px" class="text-blue-500"></wd-icon>
          </view>
        </wd-cell>
      </wd-cell-group>
    </view>
    <view class="tournament__group" v-if="false">
      <view class="text-4 text-blue-600">组别项目</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getTournamentInfo } from '@/service/tournament'
import { formatDateTime } from '@/utils/date'
import dayjs from 'dayjs'

/** options */
defineOptions({
  name: 'TournamentDetail',
})

const { safeAreaInsets } = uni.getSystemInfoSync()

/** data */
const tournamentInfo = ref<Tournament>({
  id: -1,
  name: '',
  fromDate: new Date(),
  endDate: new Date(),
  address: '',
  description: '',
  status: '已通过',
  type: '羽毛球',
  registrationEndDate: new Date(),
  registrationFromDate: new Date(),
  concatUserList: [],
  adImage: 'https://dummyimage.com/400x200/3c9cff/fff',
})

const countdownTime = ref<number>(0)

/** lifecycle */
onMounted(() => {})

onShow(() => {
  getTournamentInfo(1).then((res) => {
    const { data } = res

    tournamentInfo.value = data
    countdownTime.value = dayjs(data.registrationEndDate).diff(dayjs(), 'millisecond')
  })
})

function formatWeekDay(date: string | Date) {
  return `星期${'日一二三四五六'[dayjs(date).get('day') || 0]}`
}
</script>

<style lang="scss">
.tournament {
  &-count-down {
    display: inline-block;
    min-width: 1em;
    padding: 0 4px;
    margin: 0 2px;
    color: white;
    text-align: center;
    background-color: #f9ae3d;
    border-radius: 2px;
  }

  &-detail-item__value {
    text-align: left;
  }
}
</style>
